<template>
	<div>
		<div style="display: flex;justify-content:space-around;" v-if="isStep">
			<el-button style="margin-top: 12px" @click="upnext" type="primary">上一步</el-button>
			<div style="width: 100%;">
				<el-steps :active="active" finish-status="process" process-status="finish" simple>
					<el-step v-for="(item,index) in stepList" :title="item.title" @click="changStep(item,index)" />
				</el-steps>
			</div>
			<el-button style="margin-top: 12px" @click="next" type="primary">下一步</el-button>
		</div>
		<el-form :model="params" ref="ruleForm" :label-width="labelWidth+'px'" class="demo-ruleForm" :rules="rules"
			style="width: 100%;" :inline="inline" :size="size">
			<template v-for="(item,index) in config" :key="index">
				<view v-show="!item.hidden && ( !isStep || (item.step==null || item.step==active) )">
					<el-tooltip class="item" effect="dark" :content="item.msg||item.name" placement="bottom-end">
						<el-form-item :label="item.name" :prop="item.field" :label-width="item.labelWidth">

							<el-input v-if="item.model=='input'" v-model="params[item.field]" :placeholder="item.info"
								:type="item.type" :style="{width:(item.width?item.width:200)+'px'}"
								:disabled="item.disabled" :rows="item.rows?item.rows:3">
								<template v-if="item.append" #append><span
										@click="item.end()">{{item.append}}</span></template>
								<template v-if="item.prepend" #prepend>{{item.prepend}}</template>

							</el-input>

							<div v-else-if="item.model=='tags'">
								<el-tag style="margin-right: 10px ;" v-for="(tag,tagIndex) in params[item.field]"
									:key="tagIndex" closable :disable-transitions="false"
									@close="handleClose(item,params,tagIndex)">
									{{ tag }}
								</el-tag>
								<el-input v-model="item.value" style="width: 100px;" size="small">
								</el-input>
								<el-button class="button-new-tag" size="small" type="primary"
									@click="showInput(item,params)">
									添加
								</el-button>
							</div>

							<template v-else-if="item.model=='inputSelect'">
								<el-input v-model="params[item.field]" :placeholder="item.info" :type="item.type"
									:style="{width:(item.width?item.width:200)+'px'}" :disabled="item.disabled"
									:rows="item.rows?item.rows:3">
									<template v-if="item.append" #append><span
											@click="item.end()">{{item.append}}</span></template>
									<template v-if="item.prepend" #prepend>{{item.prepend}}</template>

								</el-input>
								<div>
									<el-tag @click="selectText(params,item.field,t.name)" style="margin-right: 10px;"
										v-for="(t,ti) in item.value">{{t.name}}</el-tag>
								</div>
							</template>

							<template v-else-if="item.model=='size'">

								<div v-if="!item.hiddenBtn"> <el-button type="success" style=""
										@click="addSize(params[item.field])">增加</el-button>
								</div>
								<div style="margin-top: 20px;"></div>
								<div v-for="(ai,aiii) in params[item.field]" style="">

									<size-input :label="item.label?item.label(params[item.field][aiii]):''"
										style="border-bottom :1px dashed #d0d0d0;margin-top: 10px;" :field="item.value"
										v-model:params="params[item.field][aiii]">
										<template #footer>
											<el-button v-if="!item.hiddenBtn" type="danger" style="margin-top: 12px"
												@click="deleteSize(params[item.field],aiii)">删除</el-button>
										</template>
									</size-input>
								</div>

							</template>


							<template v-else-if="item.model=='sizeOne'">
								<size-input :field="item.value" v-model:params="params[item.field]"></size-input>
							</template>



							<el-input v-else-if="item.model=='inputButton'" v-model="params[item.field]"
								:placeholder="item.info" :type="item.type"
								:style="{width:(item.width?item.width:200)+'px'}" :disabled="item.disabled">
								<template #append>
									<el-button type="primary" icon="Search" @click="item.fun(params[item.field])">
										{{item.button}}
									</el-button>
								</template>
							</el-input>

							<el-cascader v-if="item.model=='cascader'" v-model="params[item.field]"
								:options="item.value" :props="item.props"
								:filterable="item.filterable===true?true:false" :filter-method="item.filter"
								:collapse-tags="true" popper-class="casc">
							</el-cascader>

							<el-rate v-else-if="item.model=='rate'" v-model="params[item.field]"></el-rate>

							<el-input-number v-else-if="item.model=='inputNumber'" v-model.number="params[item.field]"
								:placeholder="item.info" :style="{width:(item.width?item.width:200)+'px'}"
								:disabled="item.disabled">
								<template v-if="item.append" #append><span
										@click="item.end()">{{item.append}}</span></template>
								<template v-if="item.prepend" #prepend>{{item.prepend}}</template>
							</el-input-number>

							<el-switch v-if="item.model=='switch'" v-model="params[item.field]" :active-value="1"
								:inactive-value="0" :disabled="item.disabled">
							</el-switch>

							<UploadImage v-model:url="params[item.field]" v-else-if="item.model=='image'"
								:disabled="item.disabled" :msg="item.imgDesc" />

							<UploadMediaImage v-model:url="params[item.field]" v-else-if="item.model=='mediaImage'"
								:disabled="item.disabled" />

							<UploadVideo v-model:url="params[item.field]" v-else-if="item.model=='video'"
								:disabled="item.disabled" />

							<UploadImages v-else-if="item.model=='images'" v-model:urls="params[item.field]"
								:msg="item.imgDesc" />
							<UploadFile v-model:url="params[item.field]" v-else-if="item.model=='file'" />

							<el-select v-model="params[item.field]" :disabled="item.disabled" placeholder="请选择"
								v-else-if="item.model=='select'"
								:multiple="item.multiple!=undefined?item.multiple:false"
								:style="{width:(item.width?item.width:200)+'px'}" @change="item.fun">
								<el-option v-for="value in item.value" :key="value.value" :label="value.label"
									:value="value.value">
									<span style="float: left">{{ value.label }}</span>
								</el-option>
							</el-select>
							<el-checkbox-group v-else-if="item.model=='checkbox'" v-model="params[item.field]">
								<el-checkbox v-for="(value, ii) in item.value" :key="ii" :name="value.value"
									:label="value.value">
									{{ value.label }}
								</el-checkbox>
							</el-checkbox-group>

							<el-radio-group v-else-if="item.model=='radio'" v-model="params[item.field]"
								:disabled="item.disabled">
								<el-radio v-for="(value, ii) in item.value" :key="ii" :label="value.value">
									{{value.label}}
								</el-radio>
							</el-radio-group>

							<el-radio-group v-else-if="item.model=='radioButton'" v-model="params[item.field]"
								fill="#409eff" @change="item.fun">
								<el-radio-button v-for="(value, ii) in item.value" :key="ii" :label="value.value">
									{{value.label}}
								</el-radio-button>
							</el-radio-group>

							<el-color-picker v-else-if="item.model=='color'" v-model="params[item.field]"
								size="large"></el-color-picker>

							<el-select v-else-if="item.model=='selectGroup'" v-model="params[item.field]" filterable
								remote reserve-keyword placeholder="请输入关键词" :remote-method="item.remote"
								:loading="item.loading" :multiple="item.multiple!=undefined?item.multiple:false"
								:style="{width:(item.width?item.width:250)+'px'}">

								<el-option-group v-for="value in item.value" :key="'group_'+value.id"
									:label="value.label" :value="value.id">
									<el-option v-for="item in value.child" :key="item.id" :label="item.label"
										:value="item.id" />
								</el-option-group>

							</el-select>

							<el-checkbox-group v-else-if="item.model=='checkboxButton'" v-model="params[item.field]"
								fill="#409eff" @change="item.change">
								<el-checkbox-button v-for="(value, ii) in item.value" :key="ii" :label="value.value">
									{{value.label}}
								</el-checkbox-button>
							</el-checkbox-group>

							<el-time-picker v-else-if="item.model=='time'" v-model="params[item.field]"
								:placeholder="item.name" :style="{width:(item.width?item.width:250)+'px'}"
								value-format="HH:mm:ss">
							</el-time-picker>

							<el-date-picker v-else-if="item.model=='date'" v-model="params[item.field]" type="datetime"
								placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss"
								:style="{width:(item.width?item.width:250)+'px'}">
							</el-date-picker>

							<el-date-picker v-else-if="item.model=='month'" v-model="params[item.field]" type="month"
								placeholder="选择日期时间" value-format="YYYY-MM"
								:style="{width:(item.width?item.width:250)+'px'}">
							</el-date-picker>

							<el-date-picker v-else-if="item.model=='dateShort'" v-model="params[item.field]" type="date"
								placeholder="选择日期时间" value-format="YYYY-MM-DD"
								:style="{width:(item.width?item.width:250)+'px'}">
							</el-date-picker>


							<template v-else-if="item.model=='timeRang'">
								<el-time-select placeholder="起始时间" v-model="params[item.field][0]" start="00:00"
									step="00:15" end="24:00">
								</el-time-select>
								<el-time-select placeholder="结束时间" v-model="params[item.field][1]" start="00:00"
									step="00:15" end="24:00" :minTime="params[item.field][0]">
								</el-time-select>
							</template>

							<template v-else-if="item.model=='dataRang'">
								<el-date-picker v-model="params[item.field]" type="datetimerange" unlink-panels
									range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
									value-format="YYYY-MM-DD HH:mm:ss" />
							</template>

							<span v-else-if="item.model=='map'">
								<span
									style="padding: 20px;">{{params[item.field]?params[item.field].poiaddress:''}}</span>
								<el-button @click="show=true">选择地点</el-button>
								<el-dialog title="选择地址" v-model="show" @close="close" width="350px">
									<SelectMap v-model:address="params[item.field]" />
								</el-dialog>
							</span>
							<SelectArea v-else-if="item.model=='area'" v-model:area="params[item.field]"
								:style="{width:(item.width?item.width:250)+'px'}" />
							<SelectAreaProvince v-else-if="item.model=='areaProvince'" v-model:area="params[item.field]"
								:style="{width:(item.width?item.width:250)+'px'}" />
							<SelectAreaCity v-else-if="item.model=='areaCity'" v-model:area="params[item.field]"
								:style="{width:(item.width?item.width:250)+'px'}" />

							<Tinymce style="z-index: 10000;" v-else-if="item.model=='tiny'"
								v-model:value="params[item.field]" :height="item.height" width="580" />

							<el-select v-else-if="item.model=='selectRemote'" v-model="params[item.field]" filterable
								remote reserve-keyword placeholder="请输入关键词" :remote-method="item.fun"
								:loading="item.loading" :multiple="item.multiple" :disabled="item.disabled"
								:style="{width:(item.width?item.width:250)+'px'}" @change="item.change">
								<el-option v-for="value in item.value" :key="'remote_'+value.value" :label="value.label"
									:value="value.value">
									<span style="float: left">{{ value.label }}</span>
								</el-option>
							</el-select>
							<el-input v-else-if="item.model=='inputPath'" v-model="params[item.field]"
								:placeholder="item.info" :type="item.type">
								<template #append>
									<el-button type="primary" @click="selectOne(params,item.field)">
										去选择
									</el-button>
								</template>
							</el-input>
							<WMTree v-else-if="item.model=='tree'" :value="item.value"
								v-model:params="params[item.field]" />
              <slot v-else-if="item.model == 'comm'" :name="item.field"></slot>
						</el-form-item>
					</el-tooltip>
				</view>
			</template>
			<slot name="footer">
				<div>
				</div>
			</slot>
		</el-form>
	</div>
</template>

<script>
	import UploadImage from '/@/components/upload/UploadImage.vue'
	import UploadMediaImage from '/@/components/upload/UploadMediaImage.vue'
	import UploadImages from '/@/components/upload/UploadImages.vue'
	import UploadVideo from '/@/components/upload/UploadVideo.vue'
	import UploadFile from '/@/components/upload/UploadFile.vue'
	import SelectMap from '/@/components/from/WMMapSelect.vue'
	import SelectArea from '/@/components/from/SelectArea.vue'
	import SelectAreaProvince from '/@/components/from/SelectAreaProvince.vue'
	import SelectAreaCity from '/@/components/from/SelectAreaCity.vue'
	import sizeInput from "/@/components/from/sizeInput.vue"
	import {
		reactive,
		defineComponent,
		toRef,
		toRefs,
		ref
	} from 'vue';
	export default {
		name: 'FromAttr',
		components: {
			UploadImage,
			UploadFile,
			SelectMap,
			SelectArea,
			UploadVideo,
			SelectAreaProvince,
			SelectAreaCity,
			UploadImages,
			UploadMediaImage,
			sizeInput
		},
		props: {

			stepChange: {
				type: Function,
				default: (step) => {

				}
			},
			isStep: {
				type: Boolean,
				default: false
			},
			stepList: {
				type: Array,
				default: () => {
					return []
				}
			},
			config: {
				type: Array,
				default: () => {
					return []
				}
			},
			size: {
				type: String,
				default: "mini"
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Object,
				default: () => {
					return {}
				}
			},
			inline: {
				type: Boolean,
				default: false
			},
			labelWidth: {
				type: Number,
				default: 120
			}
		},
		setup(props, {
			emit
		}) {
			const ruleForm = ref(null)
			const show = ref(false)
			const close = () => {
				show.value = false
			}
			const validate = (fun) => {
				ruleForm.value.validate(fun)
			}
			const resetFields = () => {
				ruleForm.value.resetFields();
			}
			const active = ref(0)
			const upnext = () => {
				if (--active.value < 0) active.value = props.stepList.length - 1
				console.log('.next', active.value)
				props.stepChange(active.value)
			}
			const next = () => {
				if (++active.value > props.stepList.length - 1) active.value = 0
				props.stepChange(active.value)
			}

			const changStep = (item, index) => {
				active.value = index
				props.stepChange(active.value)
			}

			const show1 = ref(false)
			let info;
			let field;
			const selectOne = (item, f) => {
				console.log('>>item,', JSON.stringify(item), JSON.stringify(f))
				info = item
				field = f
				show1.value = true
			}
			const selectPath = (value) => {

				info[field] = value
				show1.value = false
				info = null;
			}



			const deleteSize = (list, index) => {
				list.splice(index, 1)
			}

			const addSize = (list) => {
				list.push({})
			}

			const selectText = (params, field, t) => {
				console.log('.dian l ')
				params[field] = t
			}
			const showInput = (item, params) => {
				if (item.value)
					params[item.field].push(item.value)
			}
			const handleClose = (item, params, tagIndex) => {
				params[item.field].splice(tagIndex, 1)
			}

			return {
				validate,
				ruleForm,
				resetFields,
				show,
				close,
				active,
				next,
				upnext,
				changStep,
				show1,
				selectOne,
				selectPath,
				deleteSize,
				addSize,
				selectText,
				showInput,
				handleClose
			}
		}


	}
</script>

<style>
	.casc {
		background: beige;
		background-color: beige;
	}

	.el-cascader-panel {

		background: #ffffff;
	}

	.el-cascader__suggestion-list {
		background: #ffffff;
	}

	/*


	.el-scrollbar {
		background: #FFFFFF;
	} */
</style>
